<template>
    <div>

        <div class="cards">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

                <el-button style="background: #7052ff; color:#fff;" @click="saveRow">新增</el-button>
                <div>

                    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px;margin-top:20px" row-key="id"
                        v-loading="loading" default-expand-all>
                        <el-table-column prop="id" label="ID" align="center" width="50" />
                        <el-table-column prop="bagName" label="袋型名称" align="center" />

                        <el-table-column prop="bagType" label="袋型参数值（唯一）" align="center" ></el-table-column>
                        <el-table-column prop="areaRange1" label="数量面积＜4000㎡" align="center" ></el-table-column>
                        <el-table-column prop="areaRange2" label="4000㎡<数量面积<6000㎡" align="center"></el-table-column>
                        <el-table-column prop="areaRange3" label="6000㎡<数量面积<8000㎡" align="center"></el-table-column>
                        <el-table-column prop="areaRange4" label="数量面积8000㎡以上" align="center" ></el-table-column>
            
                        <el-table-column prop="remarks" label="备注" ></el-table-column>

                        <el-table-column fixed="right" label="操作" align="center">
                            <template #default="scope">
                                <el-button style="color: #7052ff ;" link size="small"
                                    @click.prevent="editRow(scope.$index, scope.row)"> 编辑</el-button>

                                <el-button style="color: #7052ff ;" link size="small"
                                    @click.prevent="deleteRow(scope.$index, scope.row.id)"> 删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tabs>

        </div>



        <el-dialog v-model="drawer" :title="Tips" width="600px" :before-close="handleClose">
            <el-form ref="ruleFormRef" :rules="rules" :model="uttForm" label-width="auto">
                <p style="margin-bottom:10px;font-size:16px">系数信息</p>
                <el-form-item label="袋型名称" prop="bagName">
                    <el-input v-model="uttForm.bagName" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="袋型参数值（唯一）" prop="bagType">
                    <el-input v-model="uttForm.bagType" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="总数量面积＜4000㎡" prop="areaRange1">
                    <el-input v-model="uttForm.areaRange1"></el-input>
                </el-form-item>
                <el-form-item label="4000㎡<总数量面积<6000㎡" prop="areaRange2">
                    <el-input v-model="uttForm.areaRange2" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="6000㎡<总数量面积<8000㎡" prop="areaRange3">
                    <el-input placeholder="请填写" v-model="uttForm.areaRange3"></el-input>
                </el-form-item>
                <el-form-item label="总数量面积8000㎡以上" prop="areaRange4">
                    <el-input v-model="uttForm.areaRange4" type="Number" placeholder="请填写" />
                </el-form-item>
                
                <el-form-item label="备注">
                    <el-input v-model="uttForm.remarks" type="textarea" placeholder="请填写"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="CloseAdd()">取消</el-button>
                <el-button style="background: #7052ff; color:#fff;" @click="handleSaveAdd()">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'
const Card = defineAsyncComponent(() => import('@/components/cards/index.vue'))
import { User, Plus, Warning, QuestionFilled } from '@element-plus/icons-vue';
import { factorList, factorAdd, factorEdit, factorDel } from '@/api/index'
import router from '@/router';

const drawer = ref(false)
const activeName = ref('first')

const Tips = ref('新增')
const current = ref<number>(1)
const total = ref<number>(0)
const ruleFormRef = ref<FormInstance>()

const uttForm = ref({
    id: '',
    areaRange1: '',
    areaRange2: '',
    areaRange3: '',
    areaRange4: '',
    bagName: '',
    bagType:'',
    remarks: ''
})




const pages = ref({
    pageNo: 1,
    pageSize: 1000,
})
const loading = ref(false)
// 默认选中的值

const GetPage = async () => {
    console.log('-=-=-=',)
    loading.value = true
    const res = await factorList(pages.value)
    console.log('-=-=-ss=', res)
    tableData.value = res.data
    if (res.code == 200) {
        loading.value = false
    }
}

onMounted(() => {
    GetPage()
})

const handleClose = () => {
    drawer.value = false
    ruleFormRef.value?.resetFields()
}

const editRow = async (i: String, row: Object) => {
    Tips.value = '编辑'
    drawer.value = true
    uttForm.value = row

}

const saveRow = async () => {
    drawer.value = true
    Tips.value = '新增'
}


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pages.value.pageSize = val
    GetPage()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pages.value.pageNo = val
    GetPage()
}

const deleteRow = (i: String, row: any) => {
    console.log('res', row)
    ElMessageBox.confirm(
        '是否确认删除账号?删除后该账号将被删除，无法恢复，历史归属数据仍会保留。',
        '提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await factorDel(row)
            if (res.code === 200) {
                GetPage()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            }

        })
}



const tableData = ref([])


const rules = reactive<FormRules<RuleForm>>({
    areaRange1: [{ required: true, message: '请填写', trigger: 'blur' }],

    areaRange2: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    areaRange3: [{ required: true, message: '请填写', trigger: 'blur' },],

    areaRange4: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    bagName: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    bagType: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
})



const handleSaveAdd = () => {
    ruleFormRef.value?.validate(async (valid: any) => {
        if (valid) {
            const res = Tips.value == '新增' ? await factorAdd(uttForm.value) : await factorEdit(uttForm.value)
            console.log('打印', res)
            await GetPage()
            drawer.value = false
            ruleFormRef.value?.resetFields()
        } else {
            console.log('error submit!',)
        }
    })
}

const CloseAdd = () => {
    ruleFormRef.value?.resetFields();
    drawer.value = false
}


const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>

<style scoped lang="scss">
.ache_left {
    min-width: 200px;
    border-right: 1px solid #f7f4f4;
    min-height: 770px;
    padding-right: 20px;
}</style>